<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
    />
    <title></title>
    <link
            href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
            rel="stylesheet"
    />
    <link href="./css/materialdesignicons.min.css" rel="stylesheet"/>
    <link href="./css/vuetify.min.css" rel="stylesheet"/>
    <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/vuetify.js"></script>
    <script src="./js/dayjs.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/fly.min.js"></script>
</head>
<body>
<div id="app">
    <v-app id="inspire">
        <v-app-bar app clipped-left :color="appBarColor">
            <v-toolbar-title style="color: white;">
                <div @click="playSound">环境监控系统</div>
            </v-toolbar-title>
            <v-spacer></v-spacer>
            <span style="color: white;">状态：{{onlineStatus}}</span>
        </v-app-bar>

        <v-content>
            <v-container fluid>
                <v-row dense>
                    <v-col cols="12">
                        <v-card color="#385F73" dark>
                            <v-card-title class="headline">当前时间</v-card-title>
                            <v-card-text>
                                <h2>{{thisTime}}</h2>
                            </v-card-text>
                        </v-card>
                    </v-col>
                    <v-col v-for="(item, i) in items" :key="i" cols="12">
                        <v-card :color="item.color" dark>
                            <div class="d-flex flex-no-wrap justify-space-between">
                                <div>
                                    <v-card-title
                                            class="headline"
                                            v-text="item.title"
                                    ></v-card-title>
                                    <v-card-subtitle
                                            v-text="'当前状态：'+currentStatus[i]"
                                    ></v-card-subtitle>
                                    <v-card-text
                                            v-text="'最近一次上报异常时间：'+lastErrorTime[i]"
                                    ></v-card-text>
                                </div>
                                <v-avatar class="ma-3" size="125" tile>
                                    <v-img :src="item.src"></v-img>
                                </v-avatar>
                            </div>
                        </v-card>
                    </v-col>
                    <v-col cols="12">
                        <v-card color="white" dark>
                            <div
                                    class="d-flex flex-no-wrap justify-space-between"
                                    ref="ecDiv"
                                    style="text-align: center;"
                            >
                                <div id="main" :style="echartsStyle"></div>
                            </div>
                        </v-card>
                    </v-col>
                </v-row>
            </v-container>
        </v-content>
        <v-footer app>
            <span>&copy; 2020 信息工程学院 吴一凡</span>
        </v-footer>
    </v-app>
</div>

<script>
    let BASE_URL = "http://101.200.82.120" + ":9999";
    let vm = new Vue({
        el: "#app",
        vuetify: new Vuetify({
            theme: {
                dark: false,
            },
        }),
        data: {
            thisTime: "",
            appBarColor: "blue",
            onlineStatus: "在线",
            lastErrorTime: ["-", "-"],
            currentStatus: ["-", "-"],
            echartsStyle: {
                height: 600 + "px",
                width: 600 + "px",
            },
            items: [
                {
                    color: "#1F7087",
                    src: "./img/smoke.jpg",
                    title: "有毒烟雾检测",
                },
                {
                    color: "#952175",
                    src: "./img/heat.jpeg",
                    title: "环境温度检测",
                },
            ],
            option: {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [
                        "00:00",
                        "01:00",
                        "02:00",
                        "03:00",
                        "04:00",
                        "05:00",
                        "06:00",
                        "07:00",
                        "08:00",
                        "09:00",
                        "10:00",
                        "11:00",
                        "12:00",
                        "13:00",
                        "14:00",
                        "15:00",
                        "16:00",
                        "17:00",
                        "18:00",
                        "19:00",
                        "20:00",
                        "21:00",
                        "22:00",
                        "23:00",
                    ],
                },
                yAxis: {
                    type: "value",
                    axisPointer: {
                        snap: true,
                    },
                },
                series: [
                    {
                        name: "烟雾报警持续时间（秒）",
                        type: "line",
                        smooth: true,
                        data: [
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                        ],
                    },
                    {
                        name: "温度报警持续时间（秒）",
                        type: "line",
                        smooth: true,
                        data: [
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                            0,
                        ],
                    },
                ],
            },
        },
        mounted() {
            this.echartsStyle.width = this.$refs.ecDiv.offsetWidth + "px";
            setInterval(() => {
                this.thisTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
            }, 1000);
            setInterval(() => {
                // 调用接口，失败返回服务离线
                this.getSensorData();
            }, 1000);
            setTimeout(() => {
                let myChart = echarts.init(document.getElementById("main"));
                myChart.setOption(this.option);
            }, 100);
            this.getSensorData();
        },
        methods: {
            getSensorData: function () {
                fly
                    .get(BASE_URL + "/getTodaySensorData")
                    .then((response) => {
                        if (response.data.code === 0) {
                            this.onlineStatus = "在线";
                            let tmpseries = [
                                {
                                    name: "烟雾报警持续时间（秒）",
                                    type: "line",
                                    smooth: true,
                                    data: [
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                    ],
                                },
                                {
                                    name: "温度报警持续时间（秒）",
                                    type: "line",
                                    smooth: true,
                                    data: [
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                        0,
                                    ],
                                },
                            ];
                            this.option.series = tmpseries;
                            let tempSensorData = response.data.data.tempSensorData;
                            let smokeSensorData = response.data.data.smokeSensorData;
                            let tempTimeFlag = 0;
                            let smokeTimeFlag = 0;
                            let todayDate = new Date().getDate();
                            if (smokeSensorData.length !== 0) {
                                if (smokeSensorData[0].dataValue === 0) {
                                    this.currentStatus[0] = "空气正常";
                                } else {
                                    this.currentStatus[0] = "有毒气体密度超过阈值";
                                    this.playSound();
                                }
                            }
                            if (tempSensorData.length !== 0) {
                                this.currentStatus[1] = tempSensorData[0].dataValue;
                                if (tempSensorData[0].dataValue === 0) {
                                    this.currentStatus[1] = "温度正常"
                                } else {
                                    this.currentStatus[1] = "环境温度超过阈值"
                                    this.playSound();
                                }
                            }
                            for (let i = 0; i < smokeSensorData.length; i++) {
                                if (smokeTimeFlag === 0) {
                                    if (smokeSensorData[i].dataValue === 1) {
                                        this.lastErrorTime[0] = dayjs(
                                            smokeSensorData[i].postTime
                                        ).format("YYYY-MM-DD HH:mm:ss");
                                        smokeTimeFlag = 1;
                                    }
                                }
                                if (smokeSensorData[i].dataValue === 1) {
                                    let tmpTime = new Date(smokeSensorData[i].postTime);
                                    if (tmpTime.getDate() === todayDate) {
                                        this.option.series[0].data[tmpTime.getHours()] += 1;
                                    }
                                }
                            }
                            for (let i = 0; i < tempSensorData.length; i++) {
                                if (tempTimeFlag === 0) {
                                    if (tempSensorData[i].dataValue === 1) {
                                        this.lastErrorTime[1] = dayjs(
                                            tempSensorData[i].postTime
                                        ).format("YYYY-MM-DD HH:mm:ss");
                                        tempTimeFlag = 1;
                                    }
                                }
                                if (tempSensorData[i].dataValue === 1) {
                                    let tmpTime = new Date(tempSensorData[i].postTime);
                                    if (tmpTime.getDate() === todayDate) {
                                        this.option.series[1].data[tmpTime.getHours()] += 1;
                                    }
                                }
                            }
                            setTimeout(() => {
                                let myChart = echarts.init(document.getElementById("main"));
                                myChart.setOption(this.option);
                            }, 100);
                        }
                    })
                    .catch((error) => {
                        console.log(JSON.stringify(error));
                        this.onlineStatus = "服务异常";
                    });
            },
            playSound: function () {
                try {
                    window.WebViewJavascriptBridge.callHandler(
                        "playAlert",
                        {},
                        (responseData) => {
                            console.log(responseData);
                        }
                    );
                } catch (e) {
                    console.log(e);
                }
            },
        },
    });
</script>
</body>
</html>
